<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>添加一样</button>
    <table border="1">
        <thead>
            <tr bgcolor="gray">
                <td>服装</td>
                <td>家电</td>
                <td>家居</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>旧毛衣</td>
                <td>旧电脑</td>
                <td>旧沙发</td>
                <td><a href="##">删除</a></td>
            </tr> -->
        </tbody>
    </table>
    <script>
        //获取button按钮
        var btn = document.querySelector("button")
        var tbody = document.querySelector("tbody")
        /* 绑定点击事件 */
        btn.onclick = function(){
            //创建tr
            var tr = document.createElement("tr")
            //循环三次创建三个td
            for(var i = 0 ; i < 3 ; i++){
                //创建td
                var td = document.createElement("td")
                switch(i){
                    case 0:
                        //添加一个服装
                        var text = prompt("请输入服装!!")
                        while(!text.trim()){
                            window.alert("不能输入空的")
                            text = prompt("请输入服装!!")
                        }
                        //将我们输入的值用于td的文本值
                        td.innerHTML = text;
                        break;
                    case 1:
                        //添加一个家具
                        var text = prompt("请输入家具!!")
                        while(!text.trim()){
                            window.alert("不能输入空的")
                            text = prompt("请输入家具!!")
                        }
                        //将我们输入的值用于td的文本值
                        td.innerHTML = text;
                        break;
                    case 2:
                        //添加一个家电
                        var text = prompt("请输入家电!!")
                        while(!text.trim()){
                            window.alert("不能输入空的")
                            text = prompt("请输入家电!!")
                        }
                        //将我们输入的值用于td的文本值
                        td.innerHTML = text;
                        break;
                }
                //将td追加到tr的最后面
                tr.appendChild(td)
            }
            /* 手动添加一个删除的td按钮 ,这个td里面包含了a标签*/
            var td = document.createElement("td");
            /* 
            删除:
                对删除的a标签添加点击事件=>点击事件的作用就是用删除这个tr这一行的
                给每一个a链接绑定一个唯一的属性
                原生属性 id
                    比如:
                        <a id="a">删除</a>
                        <a id="a">删除</a>
                        <a id="a">删除</a>
                        <a id="a">删除</a>
                如果让a标签具有唯一性,那么给a绑定属性添加一个时间戳

                1. 获取一个时间戳
                2. 绑定到a标签身上
                3. 给a标签绑定一个点击事件,用删除
            */
            var d = +new Date();
            td.innerHTML = `<a href="##" id='a${d}' onclick="deltr(${d})">删除</a>`
            tr.appendChild(td)
            //将tr追加到tbody的最后面
            tbody.appendChild(tr)
        }

        //删除,传入一个id
        function deltr(id){
            id = "a"+id
            var ele = document.getElementById(id)
            // console.log(ele);
            ele.parentElement.parentElement.remove();
        }
    </script>
</body>
</html>